<!-- 搜索页下拉菜单     -->

<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="value1"
        title="全部"
        disabled
        :options="option1"
      />
      <van-dropdown-item
        v-model="value2"
        title="价格"
        :options="option2"
        @change="changePrice"
      />
      <!-- 因为 categoryList的数据和下拉菜单配置选项相同，所以可以直接把categoryList写在options处，-->
      <van-dropdown-item
        v-model="value3"
        title="分类"
        :options="categoryList"
        @change="changeKind"
      />
    </van-dropdown-menu>
  </div>
</template>

<script>
export default {
  // props属性有两种形式：数组和对象
  props: ["categoryList"],
  created() {
    console.log(111, this.categoryList); //categoryList一开始是没有数据的，因为数据请求是异步操作，所以在search页面返回的数据速度会慢于页面的渲染速度，所以父组件search传给子组件dropmenu的数据是空对象
  },
  methods: {
    changePrice(value) {
      //为什么要设置形参value
      // this.$emit("changePrice", this.value2);

      this.$emit("changePrice", value);
    },
    changeKind(value) {
      this.$emit("changeKind", value);
    },
  },
  computed: {
    value3: {
      get() {
        let id = "";
        this.categoryList.forEach((item) => {
          if (item.checked) {
            id = item.value;
          }
        });
        return id;
      },
      set() {
        console.log("123");
      },
    },
  },
  data() {
    return {
      //   下拉选项栏data
      value1: 0,
      value2: "asc",
      // value3: "",
      option1: [],
      option2: [
        { text: "由低到高", value: "asc" },
        { text: "由高到低", value: "desc" },
      ],
      // option3: [
      //   { text: "默认排序", value: "a" },
      //   { text: "好评排序", value: "b" },
      //   { text: "销量排序", value: "c" },
      // ],
    };
  },
};
</script>

<style>
</style>